<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><!--{$title}--></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/cikonss.css">
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap-responsive.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/music.css" />
<script src="<!--{$url_prefix}-->js/jquery.js"></script>
<script src="<!--{$url_prefix}-->js/bootstrap.js"></script>
<script src="<!--{$url_prefix}-->js/jquery-audioPlay.js"></script>
<!--[if lt IE 9]>
  <script src="<!--{$url_prefix}-->js/html5.js"></script>
<![endif]-->
<style>
audio{visibility:hidden}
</style>
<body>
<div class="main">
	<div class="container clearfix">
		<!-- 代码 开始 -->
		<div class="bc-social clearfix">
			<ul class="bc-social-buttons">
				<li <!--{if $active eq 0}-->class="active"<!--{/if}-->><a href="<!--{$url}-->/home/music/1">新歌推荐</a></li>
				<li <!--{if $active eq 1}-->class="active"<!--{/if}-->><a href="<!--{$url}-->/home/music/1/weight">歌曲排行</a></li>
			</ul>
		</div>

		<div class="tab-content">
			<div class="tab-pane active row-music" id="portlet_tab1">
			<!--{if !empty($slist)}-->
				<ul class="clearfix" id="song_list">

					<!--{foreach from=$slist item=st name=st}-->
					<li>
						
						<div class="clearfix kecaozuo" onclick="bind_play(this)">
							<!--{if $cpage eq 1 && $smarty.foreach.st.index < 3}-->
							<p class="num num0<!--{$smarty.foreach.st.index+1}-->">
							<!--{else}-->
							<p class="num num04">
							<!--{/if}-->
							<!--{$smarty.foreach.st.index+1+($cindex*$cpage)-$cindex}--></p>
							<p class="musicpic">
								<img src="<!--{$st.posters_url|get_img_url:song}-->" />
							</p>
							<input type="hidden" name="audiosrc" value="<!--{$st.song_url|get_img_url:song}-->" />
							<p class="listdectwo">
								<span><!--{$st.name}--></span>
								<span class="songer"><small><!--{$st.singer|strip_tags}--></small></span>
							</p>
							<p class="icon01">
								<a href="#"><span class="icon icon-small pause"><span
										class="icon-pause"></span></span></a>								
							</p>
						</div>
						<div class="download"><a href="<!--{$url}-->/home/download/<!--{$st.id_song}-->/<!--{$st.song_url}-->#mp.weixin.qq.com"><span class="icon icon-small"><span class="icon-download"></span></span></a></div>
						<div class="song left">
							<!--{$st.lyric}-->
						</div>

					</li>
					<!--{/foreach}-->
				</ul>
			<!--{/if}-->
				<input type="hidden" name="cpage" id="cpage" value="<!--{$cpage}-->" />

			</div>
	<div class="error_pop"></div>
	<div class="mplayer"></div>
		</div>
	</div>
	<!--提示信息弹出-->

	<!-- 代码 结束 -->
<footer>powered by <a href="http://www.it008.com" target="_blank">赏金猎人</a></footer>
</div>
</body>

<script type="text/javascript">

	function bind_play(obj){
		var pli = $(obj).parent('li');
		var index = $("#portlet_tab1 li").index(pli);
		$("body audio").each(function(i){
			$(this).get(0).currentTime=0;
			$(this).get(0).pause();
		});
		if(pli.attr('class') == 'playing'){
			if(pli.find('div.song').css('display') == 'block'){
				pli.find('div.song').hide();
				pli.find('p.icon01').find('span.icon-pause').removeClass('icon-pause').addClass('icon-play')
				if($('#chatAudio'+index).get(0)){
					$('#chatAudio'+index).get(0).pause();
				}
			}else{
				pli.find('div.song').show();
				pli.find('p.icon01').find('span.icon-play').removeClass('icon-play').addClass('icon-pause')
				if($('#chatAudio'+index).get(0)){
					$('#chatAudio'+index).get(0).play();
				}
			}
		}else{
			$("#portlet_tab1 li").removeClass('playing');
			pli.addClass('playing');
			var a_src = pli.find('input[name=audiosrc]').val();
			var point = a_src.lastIndexOf(".");
			var type = a_src.substr(point);
			var a_type = 'mpeg';
			if(type == '.wav'){
				a_type = 'wav';
			}else if(type == '.ogg'){
				a_type = 'ogg';
			}else if(type == '.mp3'){
				
			}else{
				//$('.error_pop').text('不支持'+type+'类型的歌曲播放').show();
				$('.error_pop').text('您的浏览器不支持播放该歌曲').show();
				return false;
			}
			
			var tmpAutioHtml = '<audio id="chatAudio' + index +'" controls="controls" preload="auto"><source src="'+ a_src +'"></source></audio>';

			if(!$('#chatAudio'+index)[0]){
				$("body").append(tmpAutioHtml);
			}
			$('#chatAudio'+index).get(0).play();
		}
	}

	window.setInterval(function(){
		$('.error_pop').text('').hide();
	}, 3000);
	
	
	var flag = 0;
	
	$(document).ready(function(){
		
		
		// 给浏览器窗口绑定 scroll 事件
		$(window).bind("scroll",function(){
		    // 判断窗口的滚动条是否接近页面底部
		    if($(document).height() - $(window).height() - $(document).scrollTop() < 10 && flag == 0) {
					var page = parseInt($("#cpage").val())+1;
					flag = 1;
		             $.ajax({
		                url: '<!--{$url}-->/home/music/'+page + '/<!--{$weight}-->',
		                type: "get",
		                success: function(data) {
		                	result = $(data).find("#song_list");
		                	nexpage = $(data).find("#cpage").val();
		                	if(nexpage){
								$("#cpage").val(nexpage);
							}
		                   if(result.get(0) != undefined){
		                	   $("#song_list").append(result);
		                	   flag = 0;
		                   }else{
		                	   $('.error_pop').text('没有数据了').show();
		                   }
		                }
		            }); 

		    }
		});
		
	});
</script>

</html>
